<template>
  <div class="Index">
    <div class="contBox">
      <router-view />
    </div>
    <TabbarPage :props-active="active" @change-active="changeActive" />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import common from "@/utils/common.ts";
import TabbarPage from "@/components/TabbarPage.vue";
import Home from "@/views/Home.vue";
import OfflineMall from "@/views/OfflineMall.vue";
import onLineMall from "@/views/onLineMall.vue";
import My from "@/views/My.vue";
@Component({
  components: {
    TabbarPage,
  },
})
export default class Index extends Vue {
  private active: number = 0;
  private changeActive(e: number): void {
    switch (e) {
      case 0:
        this.$router.replace("/home");
        break;
      case 1:
        this.$router.replace("/offline");
        break;
      case 2:
        this.$router.replace("/online");
        break;
      case 3:
        this.$router.replace("/my");
        break;
    }
    this.active = e;
  }

  private created(): void {
    switch (this.$route.path) {
      case "/home":
        this.active = 0;
        break;
      case "/offline":
        this.active = 1;
        break;
      case "/online":
        this.active = 2;
        break;
      case "/my":
        this.active = 3;
        break;
    }
  }
}
</script>

<style lang="scss">
.Index {
  width: 100%;
  .contBox {
    width: 100%;
    padding-bottom: 2rem;
    box-sizing: border-box;
  }
}
</style>